<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <form-title-setting
      :field="field"
      :mode="mode"
      :setting="setting"
      :disabled="isSystem"
      @input="updateForDom"
    ></form-title-setting>
    <!-- end 标题 -->

    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      :mode="mode"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting :field="field" @input="update"></form-required-setting>
        <!-- 不允许重复值 -->
        <el-checkbox :value="field.setting.appIsUp" @input="update($event, 'appIsUp', true)" :true-label="1" :false-label="0">
          <span class="form-item-box-label">{{$t('common.form.tip.attachment.tips11')}}</span>
        </el-checkbox>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 字段权限 -->
    <div class="form-setting-group form-setting-item" v-if="(!isSystem && !isServiceProviderFlag) || isTaskAttachmentSystem">
      <h4 class="form-item-title">{{$t('common.base.fieldPermissions')}}</h4>
      <div class="form-item-box">
        <!-- 可见性 -->
        <form-visible-setting v-if="!isSystem && !isServiceProviderFlag" :field="field" @input="update"></form-visible-setting>
        <!-- 是否对客户可见 -->
        <form-visible-customer-setting :field="field" @input="update" v-if="isShowVisibleCustomer"></form-visible-customer-setting>
      </div>
    </div>
    <!-- end 字段权限 -->

    <!-- start 其他设置 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.otherSet')}}</h4>
      <div class="form-item-box">
        <el-checkbox :value="field.setting.isAddWatermark" @input="update($event, 'isAddWatermark', true)" :true-label="1" :false-label="0">
          <span class="form-item-box-label">{{$t('common.form.tip.attachment.tips12')}}</span>
        </el-checkbox>
      </div>
      <div class="form-item-box" v-if="camcorderGray">
        <el-checkbox
          :value="field.setting.isOpenCamcorder"
          @input="update($event, 'isOpenCamcorder', true)"
          :true-label="1"
          :false-label="0"
        >
          <span class="form-item-box-label">{{ $t('common.form.tip.attachment.tips22') }}</span>
        </el-checkbox>
      </div>
      <div class="form-item-box camcorder-url" v-if="field.setting.isOpenCamcorder && camcorderGray">
        <el-input
          v-model="field.setting.camcorderUrl"
          @input="update($event, 'camcorderUrl', true)"
          :placeholder="$t('common.form.tip.attachment.tips23')"
        ></el-input>
        <el-input
          v-model="field.setting.camcorderOpenCameraUrl"
          @input="update($event, 'camcorderOpenCameraUrl', true)"
          :placeholder="$t('common.form.tip.attachment.tips24')"
        ></el-input>
      </div>
    </div>
    <!-- end 其他设置 -->
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import { settingProps } from '@src/component/form/components/props';
import { getRootWindow } from '@src/util/dom';

export default {
  name: 'form-attachment-setting',
  mixins: [SettingMixin],
  props: settingProps,
  computed: {
    // 高拍仪上传灰度
    camcorderGray() {
      const RootWindow = getRootWindow(window);
      return Boolean(RootWindow.grayAuth?.CAMCORDER);
    },
    isSystem() {
      return this.field.isSystem === 1
    },
    // 工单的系统附件字段（fieldName:attachment）
    isTaskAttachmentSystem() {
      return this.field.fieldName === 'attachment' && this.mode === 'task'
    },
  },
  methods: {
    updateForDom(event){
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;
      
      this.update(value, prop)
    },
    update(value, prop, isSetting = false){
      this.$emit('input', {value, prop, isSetting})
    }
  }
}
</script>

<style lang="scss" scoped>
.form-item-box{
  ::v-deep .el-checkbox__input{
    line-height: 1.5;
    float: left;
  }
  &-label{
    display: inline-block;
    white-space: pre-wrap;
    padding-right: 10px;
  }
  &.camcorder-url {
    padding-left: 24px;
    margin: 8px 0 4px;
  }
}
</style>